<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <title>在线商城</title> <!-- 设置页面标题为“在线商城系统” -->

    <meta charset="utf-8"> <!-- 设置文档使用UTF-8字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置浏览器使用最新的IE版本渲染 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动端视口宽度和缩放比例 -->
    <meta name="format-detection" content="telephone=no"> <!-- 禁用移动设备的电话号码识别 -->
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 允许Web应用在iOS设备的全屏模式下运行 -->
    <meta name="author" content="沐硕"> <!-- 设置网页作者 -->
    <meta name="keywords" content="物美廉价"> <!-- 设置网页关键词 -->
    <meta name="description" content="一个值得相信的网站"> <!-- 设置网页描述 -->

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- 引入Bootstrap的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="style.css"> <!-- 引入自定义样式表文件 -->

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" /> <!-- 引入Swiper轮播组件的CSS文件 -->

    <link rel="preconnect" href="https://fonts.googleapis.com"> <!-- 预连接到Google Fonts的域名 -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- 预连接到Google Fonts的静态资源域名，并指定跨域属性 -->

    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> <!-- 引入Google Fonts中的Jost和Lato字体，指定了要加载的字体权重和显示方式 -->
<%--    <link rel="stylesheet"type="text/css"href="css/Animation.css">--%>
    <!-- script ================================================== -->
    <script src="js/modernizr.js"></script> <!-- 引入Modernizr库的JS文件 -->
</head>
<body>
<!--<%--图标--%>-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <jsp:include page="symol.jsp" />
</svg>

<!--搜索框-->
<div class="search-popup">
    <!-- 搜索弹出框容器 -->
    <jsp:include page="search.jsp" />
</div>
<!--头部-->
<header id="header" class="site-header header-scrolled position-fixed text-black bg-light">
    <!-- 头部开始，具有类名site-header、header-scrolled、position-fixed、text-black和bg-light -->
    <jsp:include page="header.jsp" />
    <!-- 导航条结束 -->
</header>



<!-- 大字幕区域开始，具有类名position-relative、overflow-hidden和bg-light-blue  轮播图-->
<section id="billboard" class="position-relative overflow-hidden bg-light-blue">
    <!-- 大字幕区域开始，具有类名position-relative、overflow-hidden和bg-light-blue -->
<jsp:include page="billboard.jsp"/>
</section>

<!-- 公司服务区域开始，具有类名padding-large -->
<section id="company-services" class="padding-large">
    <!-- 公司服务区域开始，具有类名padding-large -->
<jsp:include page="companySevice.jsp"/>
</section>

<!-- 移动产品区域开始，具有类名product-store、position-relative、padding-large和no-padding-top -->
<section id="mobile-products" class="product-store position-relative padding-large no-padding-top">
    <div class="container">
        <div class="row">
            <div class="display-header d-flex justify-content-between pb-3">
                <h2 class="display-7 text-dark text-uppercase">移动产品</h2>
                <div class="btn-right">
                    <a href="shop.jsp" class="btn btn-medium btn-normal text-uppercase">去购物</a>
                </div>
            </div>
            <div class="swiper product-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item1.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Iphone 15</a>
                                </h3>
                                <span class="item-price text-primary">￥6888</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item2.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Iphone 11</a>
                                </h3>
                                <span class="item-price text-primary">￥5500</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item3.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Iphone 8</a>
                                </h3>
                                <span class="item-price text-primary">￥4780</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item4.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Iphone 13</a>
                                </h3>
                                <span class="item-price text-primary">￥4500</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item5.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Iphone 12</a>
                                </h3>
                                <span class="item-price text-primary">￥4300</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination position-absolute text-center"></div>
</section>


<!-- 智能手表区域开始，具有类名product-store、padding-large和position-relative -->
<section id="smart-watches" class="product-store padding-large position-relative">
    <div class="container">
        <div class="row">
            <div class="display-header d-flex justify-content-between pb-3">
                <h2 class="display-7 text-dark text-uppercase">智能手表</h2>
                <div class="btn-right">
                    <a href="shop.jsp" class="btn btn-medium btn-normal text-uppercase">去购物</a>
                </div>
            </div>
            <div class="swiper product-watch-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item6.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Pink watch</a>
                                </h3>
                                <span class="item-price text-primary">￥2870</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item7.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">Heavy watch</a>
                                </h3>
                                <span class="item-price text-primary">￥3680</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item8.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">spotted watch</a>
                                </h3>
                                <span class="item-price text-primary">￥750</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item9.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">black watch</a>
                                </h3>
                                <span class="item-price text-primary">￥650</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="product-card position-relative">
                            <div class="image-holder">
                                <img src="images/product-item10.jpg" alt="product-item" class="img-fluid">
                            </div>
                            <div class="cart-concern position-absolute">
                                <div class="cart-button d-flex">
                                    <a href="#" class="btn btn-medium btn-black">加入购物车<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                                </div>
                            </div>
                            <div class="card-detail d-flex justify-content-between pt-3">
                                <h3 class="card-title text-uppercase">
                                    <a href="#">black watch</a>
                                </h3>
                                <span class="item-price text-primary">￥750</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination position-absolute text-center"></div>
</section>

<!-- 年度特卖区域开始，具有背景样式和图片 -->
<section id="yearly-sale" class="bg-light-blue overflow-hidden mt-5 padding-xlarge" style="background-image: url('images/single-image1.png'); background-position: right; background-repeat: no-repeat;">


    <!-- 行，使用Flex布局，并自动换行以及项目居中对齐 -->
    <div class="row d-flex flex-wrap align-items-center">

        <!-- 左侧列，占据大屏幕的6列和小屏幕的12列 -->
        <div class="col-md-6 col-sm-12">
            <!-- 文本内容容器，偏移4列，填充中等大小的内边距 -->
            <div class="text-content offset-4 padding-medium">
                <!-- 折扣信息 -->
                <h3>10% off</h3>
                <!-- 主标题，大号文本，大写，黑色 -->
                <h2 class="display-2 pb-5 text-uppercase text-dark">新年特卖</h2>
                <!-- 前往购物按钮，样式为中号、黑色、大写、无圆角 -->
                <a href="shop.html" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">无店铺销售</a>
            </div>
        </div>

        <!-- 右侧列，占据大屏幕的6列和小屏幕的12列，留空 -->
        <div class="col-md-6 col-sm-12">
            <!-- 这里是右侧内容，可以根据需要填充 -->
        </div>

    </div>
</section>

<!-- 最新博客区域开始，具有大内边距 -->
<section id="latest-blog" class="padding-large">
    <!-- 最新博客区域开始，具有大内边距 -->
    <div class="container">
        <!-- 容器 -->
        <div class="row">
            <!-- 行 -->

            <!-- 显示头部，左右对齐，底部边距3个单位 -->
            <div class="display-header d-flex justify-content-between pb-3">
                <!-- 显示头部标题，大号文本，黑色，大写 -->
                <h2 class="display-7 text-dark text-uppercase">最新帖子</h2>
                <!-- 右侧按钮区域 -->
                <div class="btn-right">
                    <!-- 前往博客按钮，样式为中号、普通、大写 -->
                    <a href="blog.html" class="btn btn-medium btn-normal text-uppercase">阅读博客</a>
                </div>
            </div>

            <!-- 博客文章网格，使用Flex布局，自动换行并在项目之间对齐 -->
            <div class="post-grid d-flex flex-wrap justify-content-between">
                <!-- 第一列，大屏幕占据4列，小屏幕占据12列 -->
                <div class="col-lg-4 col-sm-12">
                    <!-- 卡片，无边框，右边距3单位 -->
                    <div class="card border-none me-3">
                        <!-- 卡片图片 -->
                        <div class="card-image">
                            <!-- 文章图片，响应式 -->
                            <img src="images/post-item1.jpg" alt="" class="img-fluid">
                        </div>
                    </div>
                    <!-- 卡片主体，大写字母 -->
                    <div class="card-body text-uppercase">
                        <!-- 卡片元数据，文本灰色 -->
                        <div class="card-meta text-muted">
                            <!-- 元数据日期 -->
                            <span class="meta-date">feb 22, 2023</span>
                            <!-- 元数据类别 -->
                            <span class="meta-category">- 小器具</span>
                        </div>
                        <!-- 卡片标题 -->
                        <h3 class="card-title">
                            <!-- 文章链接 -->
                            <a href="#">在2024年获得一些很酷的小玩意</a>
                        </h3>
                    </div>
                </div>

                <!-- 第二列，大屏幕占据4列，小屏幕占据12列 -->
                <div class="col-lg-4 col-sm-12">
                    <!-- 卡片，无边框，右边距3单位 -->
                    <div class="card border-none me-3">
                        <!-- 卡片图片 -->
                        <div class="card-image">
                            <!-- 文章图片，响应式 -->
                            <img src="images/post-item2.jpg" alt="" class="img-fluid">
                        </div>
                    </div>
                    <!-- 卡片主体，大写字母 -->
                    <div class="card-body text-uppercase">
                        <!-- 卡片元数据，文本灰色 -->
                        <div class="card-meta text-muted">
                            <!-- 元数据日期 -->
                            <span class="meta-date">2023年2月25日</span>
                            <!-- 元数据类别 -->
                            <span class="meta-category">- 科技</span>
                        </div>
                        <!-- 卡片标题 -->
                        <h3 class="card-title">
                            <!-- 文章链接 -->
                            <a href="#">你不会得到的技术黑客</a>
                        </h3>
                    </div>
                </div>

                <!-- 第三列，大屏幕占据4列，小屏幕占据12列 -->
                <div class="col-lg-4 col-sm-12">
                    <!-- 卡片，无边框，右边距3单位 -->
                    <div class="card border-none me-3">
                        <!-- 卡片图片 -->
                        <div class="card-image">
                            <!-- 文章图片，响应式 -->
                            <img src="images/post-item3.jpg" alt="" class="img-fluid">
                        </div>
                    </div>
                    <!-- 卡片主体，大写字母 -->
                    <div class="card-body text-uppercase">
                        <!-- 卡片元数据，文本灰色 -->
                        <div class="card-meta text-muted">
                            <!-- 元数据日期 -->
                            <span class="meta-date">2023年2月22日</span>
                            <!-- 元数据类别 -->
                            <span class="meta-category">- 相机</span>
                        </div>
                        <!-- 卡片标题 -->
                        <h3 class="card-title">
                            <!-- 文章链接 -->
                            <a href="#">世界十大小型相机</a>
                        </h3>
                    </div>
                </div>

            </div>
            <!-- 结束博客文章网格 -->

        </div>
        <!-- 结束行 -->
    </div>
    <!-- 结束容器 -->
</section>
<!-- 结束最新博客区域 -->

<!-- 测试imonial部分的主容器 -->
<section id="testimonials" class="position-relative">
    <!-- 测试imonial部分的主容器 -->
    <div class="container">
        <!-- 容器 -->
        <div class="row">
            <!-- 行 -->

            <!-- 评论内容区域，相对定位 -->
            <div class="review-content position-relative">
                <!-- Swiper箭头图标 - 左箭头 -->
                <div class="swiper-icon swiper-arrow swiper-arrow-prev position-absolute d-flex align-items-center">
                    <!-- 左箭头SVG图标 -->
                    <svg class="chevron-left">
                        <use xlink:href="#chevron-left" />
                    </svg>
                </div>

                <!-- Swiper主体部分 -->
                <div class="swiper testimonial-swiper">
                    <!-- 引用符号图标 -->
                    <div class="quotation text-center">
                        <!-- 引用符号SVG图标 -->
                        <svg class="quote">
                            <use xlink:href="#quote" />
                        </svg>
                    </div>

                    <!-- Swiper包裹器 -->
                    <div class="swiper-wrapper">
                        <!-- 第一个Swiper幻灯片 - 文本居中，内容居中 -->
                        <div class="swiper-slide text-center d-flex justify-content-center">
                            <!-- 评论项目 -->
                            <div class="review-item col-md-10">
                                <!-- 评论图标 -->
                                <i class="icon icon-review"></i>
                                <!-- 引用 -->
                                <blockquote>“终于收到我需要的宝贝了，东西很好，价美物廉，谢谢掌柜的！说实在，这是我淘宝购物来让我最满意的一次购物。无论是掌柜的态度还是对物品，我都非常满意的。掌柜态度很专业热情，有问必答，回复也很快，我问了不少问题，他都不觉得烦，都会认真回答我，这点我向掌柜表示由衷的敬意，这样的好掌柜可不多。再说宝贝，正是我需要的，收到的时候包装完整，打开后让我惊喜的是，宝贝比我想象中的还要好！不得不得竖起大拇指。下次需要的时候我还会再来的，到时候麻烦掌柜给个优惠哦！ ”</blockquote>
                                <!-- 评分部分 -->
                                <div class="rating">
                                    <!-- 星星评分 -->
                                    <svg class="star star-fill">
                                        <use xlink:href="#star-fill"></use>
                                    </svg>
                                    <svg class="star star-fill">
                                        <use xlink:href="#star-fill"></use>
                                    </svg>
                                    <svg class="star star-fill">
                                        <use xlink:href="#star-fill"></use>
                                    </svg>
                                    <svg class="star star-half">
                                        <use xlink:href="#star-half"></use>
                                    </svg>
                                    <svg class="star star-empty">
                                        <use xlink:href="#star-empty"></use>
                                    </svg>
                                </div>
                                <!-- 作者细节 -->
                                <div class="author-detail">
                                    <!-- 作者名字，黑色，大写 -->
                                    <div class="name text-dark text-uppercase pt-2">Emma Chamberlin</div>
                                </div>
                            </div>
                        </div>

                        <!-- 第二个Swiper幻灯片 - 文本居中，内容居中 -->
                        <div class="swiper-slide text-center d-flex justify-content-center">
                            <!-- 评论项目 -->
                            <div class="review-item col-md-10">
                                <!-- 评论图标 -->
                                <i class="icon icon-review"></i>
                                <!-- 引用 -->
                                <blockquote>“当你看到这个好评时，就证明该宝贝真心不错，这次购物很成功！最近在淘宝买东西太多啦，大到几千元家里的家电小到几元钱的东西，因为没时间去实体店里去看，就在这里淘啦，不仅淘到了好东西而且还比实体店里便宜很多，真是太方便了，不过在选择时需要谨慎，因为同样的东西价格和质量不一样的太多，永远要相信一分钱一分货的道理哦，祝你购物愉快！ ”</blockquote>
                                <!-- 评分部分 -->
                                <div class="rating">
                                    <!-- 星星评分 -->
                                    <svg class="star star-fill">
                                        <use xlink:href="#star-fill"></use>
                                    </svg>
                                    <svg class="star star-fill">
                                        <use xlink:href="#star-fill"></use>
                                    </svg>
                                    <svg class="star star-fill">
                                        <use xlink:href="#star-fill"></use>
                                    </svg>
                                    <svg class="star star-half">
                                        <use xlink:href="#star-half"></use>
                                    </svg>
                                    <svg class="star star-empty">
                                        <use xlink:href="#star-empty"></use>
                                    </svg>
                                </div>
                                <!-- 作者细节 -->
                                <div class="author-detail">
                                    <!-- 作者名字，黑色，大写 -->
                                    <div class="name text-dark text-uppercase pt-2">Jennie Rose</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- 结束Swiper包裹器 -->
                </div>
                <!-- 结束Swiper主体部分 -->

                <!-- Swiper箭头图标 - 右箭头 -->
                <div class="swiper-icon swiper-arrow swiper-arrow-next position-absolute d-flex align-items-center">
                    <!-- 右箭头SVG图标 -->
                    <svg class="chevron-right">
                        <use xlink:href="#chevron-right" />
                    </svg>
                </div>

            </div>
            <!-- 结束评论内容区域 -->

        </div>
        <!-- 结束行 -->
    </div>
    <!-- 结束容器 -->

    <!-- Swiper分页器 -->
    <div class="swiper-pagination"></div>
</section>
<!-- 结束测试imonial部分 -->

<!-- 订阅部分的主容器 -->
<section id="subscribe" class="container-grid padding-large position-relative overflow-hidden">
    <!-- 订阅部分的主容器 -->
    <div class="container">
        <!-- 容器 -->
        <div class="row">
            <!-- 行 -->

            <!-- 订阅内容区域，背景为暗色，水平和垂直居中对齐，适当内边距 -->
            <div class="subscribe-content bg-dark d-flex flex-wrap justify-content-center align-items-center padding-medium">
                <!-- 左侧列，中等设备占6列，小设备占12列 -->
                <div class="col-md-6 col-sm-12">
                    <!-- 显示标题部分，右边内边距 -->
                    <div class="display-header pe-3">
                        <!-- 主标题，大写，文本颜色为浅色 -->
                        <h2 class="display-7 text-uppercase text-light">订阅我们</h2>
                        <!-- 段落内容 -->
                        <p>获得最新的新闻，更新和交易直接邮寄到您的收件箱。</p>
                    </div>
                </div>

                <!-- 右侧列，中等设备占5列，小设备占12列 -->
                <div class="col-md-5 col-sm-12">
                    <!-- 订阅表单 -->
                    <form class="subscription-form validate">
                        <!-- 输入组，自动换行 -->
                        <div class="input-group flex-wrap">
                            <!-- 输入框，表单控件，圆角为零，类型为电子邮件，占位符为“Your email address here”，必填 -->
                            <input class="form-control btn-rounded-none" type="email" name="EMAIL" placeholder="Your email address here" required="">
                            <!-- 订阅按钮，中等大小，文本大写，背景颜色为主色调，圆角为零 -->
                            <button class="btn btn-medium btn-primary text-uppercase btn-rounded-none" type="submit" name="subscribe">订阅</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 结束订阅内容区域 -->

        </div>
        <!-- 结束行 -->
    </div>
    <!-- 结束容器 -->
</section>
<!-- 结束订阅部分 -->

<section id="instagram" class="padding-large overflow-hidden no-padding-top">
    <!-- Instagram部分的主容器 -->
    <div class="container">
        <!-- 容器 -->
        <div class="row">
            <!-- 行 -->

            <!-- 显示标题部分，大写文本，深色，居中对齐，底部边距3个单位 -->
            <div class="display-header text-uppercase text-dark text-center pb-3">
                <!-- 主标题，显示级别7 -->
                <h2 class="display-7">购买我们的 Insta</h2>
            </div>

            <!-- Instagram项目区域，灵活包裹，弹性布局，空间自动换行 -->
            <div class="d-flex flex-wrap">
                <!-- Instagram项目，右侧内边距2单位 -->
                <figure class="instagram-item pe-2">
                    <!-- 图片链接，相对定位 -->
                    <a href="#" class="image-link position-relative">
                        <!-- Instagram图片，类名为insta-image -->
                        <img src="images/insta-item1.jpg" alt="instagram" class="insta-image">
                        <!-- 图标覆盖，绝对定位，居中对齐 -->
                        <div class="icon-overlay position-absolute d-flex justify-content-center">
                            <!-- Instagram图标 -->
                            <svg class="instagram">
                                <use xlink:href="#instagram"></use>
                            </svg>
                        </div>
                    </a>
                </figure>
                <!-- 结束Instagram项目 -->

                <!-- Instagram项目，右侧内边距2单位 -->
                <figure class="instagram-item pe-2">
                    <!-- 图片链接，相对定位 -->
                    <a href="#" class="image-link position-relative">
                        <!-- Instagram图片，类名为insta-image -->
                        <img src="images/insta-item2.jpg" alt="instagram" class="insta-image">
                        <!-- 图标覆盖，绝对定位，居中对齐 -->
                        <div class="icon-overlay position-absolute d-flex justify-content-center">
                            <!-- Instagram图标 -->
                            <svg class="instagram">
                                <use xlink:href="#instagram"></use>
                            </svg>
                        </div>
                    </a>
                </figure>
                <!-- 结束Instagram项目 -->

                <!-- Instagram项目，右侧内边距2单位 -->
                <figure class="instagram-item pe-2">
                    <!-- 图片链接，相对定位 -->
                    <a href="#" class="image-link position-relative">
                        <!-- Instagram图片，类名为insta-image -->
                        <img src="images/insta-item3.jpg" alt="instagram" class="insta-image">
                        <!-- 图标覆盖，绝对定位，居中对齐 -->
                        <div class="icon-overlay position-absolute d-flex justify-content-center">
                            <!-- Instagram图标 -->
                            <svg class="instagram">
                                <use xlink:href="#instagram"></use>
                            </svg>
                        </div>
                    </a>
                </figure>
                <!-- 结束Instagram项目 -->

                <!-- Instagram项目，右侧内边距2单位 -->
                <figure class="instagram-item pe-2">
                    <!-- 图片链接，相对定位 -->
                    <a href="#" class="image-link position-relative">
                        <!-- Instagram图片，类名为insta-image -->
                        <img src="images/insta-item4.jpg" alt="instagram" class="insta-image">
                        <!-- 图标覆盖，绝对定位，居中对齐 -->
                        <div class="icon-overlay position-absolute d-flex justify-content-center">
                            <!-- Instagram图标 -->
                            <svg class="instagram">
                                <use xlink:href="#instagram"></use>
                            </svg>
                        </div>
                    </a>
                </figure>
                <!-- 结束Instagram项目 -->

                <!-- Instagram项目，右侧内边距2单位 -->
                <figure class="instagram-item pe-2">
                    <!-- 图片链接，相对定位 -->
                    <a href="#" class="image-link position-relative">
                        <!-- Instagram图片，类名为insta-image -->
                        <img src="images/insta-item5.jpg" alt="instagram" class="insta-image">
                        <!-- 图标覆盖，绝对定位，居中对齐 -->
                        <div class="icon-overlay position-absolute d-flex justify-content-center">
                            <!-- Instagram图标 -->
                            <svg class="instagram">
                                <use xlink:href="#instagram"></use>
                            </svg>
                        </div>
                    </a>
                </figure>
                <!-- 结束Instagram项目 -->

            </div>
            <!-- 结束Instagram项目区域 -->

        </div>
        <!-- 结束行 -->
    </div>
    <!-- 结束容器 -->
</section>
<!-- 结束Instagram部分 -->

<jsp:include page="footer.jsp"/>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
<script>
    const menu_box=document.querySelector('.menu-box');
    const menu_button=document.querySelector('.menu-button');

    menu_button.addEventListener('click',function(){
        menu_box.classList.toggle('active');
    })
</script>
</html>